<template>
  <view class="content">
    <view class="content_swipe">
      <u-swipe-action :show="item.show" :index="index"
                      v-for="(item, index) in list_lend" :key="item.id"
                      @click="click" @open="open"
                      :options="options">
        <view class="u-border-bottom">
          <view class="item">
            <image mode="aspectFill" :src="'/api/file/img?name=' + item.img" class="category-wrap"/>
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="title-wrap">
              <text class="title u-line-2">{{ item.name }}</text>
              <text class="remark u-line-2">{{ item.remark }}</text>
            </view>
            <view class="amount-wrap">
              <text class="amount u-line-2">￥{{ item.price }}/{{ getUnitText(item.unit) }}</text>
              <view class="demo-tag">
                <view class="demo-tag-owner">
                  <view>{{ getAgreeText(item.status) }}</view>
                </view>

              </view>
            </view>
          </view>

        </view>

      </u-swipe-action>
    </view>


  </view>

</template>

<script>

import {
  goodsDeleteApi,
  goodsListApi, marketList_inApi,
  outlayAddApi,
  outlayDeleteApi,
  outlayListApi,
  userLoginApi
} from "@/network/api/api";
import {getAgreeText, getLendText, getUnitText} from "@/common/common";

export default {

  data() {
    return {
      list_lend: [],

      btnWidth: 180,
      show: false,
      options: [
        {
          text: '查看',
          style: {
            backgroundColor: '#007aff'
          }
        },
        // {
        //   text: '删除',
        //   style: {
        //     backgroundColor: '#dd524d'
        //   }
        // }
      ]
    };
  },
  onLoad() {
    console.log("onLoad1")
  },
  mounted() {
    this.getData();
    uni.$on("refresh-lend", (e) => {
      this.getData();
    });
  },

  methods: {
    getAgreeText,
    getLendText,
    getUnitText,
    getData() {
      const _this = this;
      marketList_inApi().then(res => {
        if (res.code === 200) {
          _this.list_lend = res.data;
        } else {
          uni.showToast({
            title: "登录失败",
            icon: 'none'
          });
        }
      }).catch(err => {
        console.log(err)
      })
    },
    click(index, index1) {

      const _this = this
      if (index1 === 1) {
        this.list_lend.splice(index, 1);
        // this.$u.toast(`删除了第${index}个cell`);
        goodsDeleteApi({id: this.list_lend[index].id}).then(res => {
          if (res.code === 200) {
            _this.getData()
          } else {

          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.list_lend[index].show = false;
        console.log(this.list_lend[index].goodsId)
        uni.navigateTo({
          url: "/pages/view-goods/view-goods?id="
              + this.list_lend[index].goodsId
              + "&goodsId=" + this.list_lend[index].goodsId + "&agreementId=" + this.list_lend[index].id
        })

      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list_lend[index].show = true;
      this.list_lend.map((val, idx) => {
        if (index != idx) this.list_lend[idx].show = false;
      })
    },
    goToPage(url) {
      if (!url) return;
      uni.navigateTo({
        url
      });
    }
  }
};
</script>


<style lang="scss" scoped>

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 4rpx 14rpx;
  border-radius: 50rpx;
  font-size: 20rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

/*swipe*/
.item {
  display: flex;
  padding: 20rpx;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title-wrap {
  width: 80%;
}

.category-wrap {
  width: 10%;
}

.amount-wrap {
  width: 50%;
}

.image-wrap {
  display: flex;
  margin-left: 50rpx;
  width: 100%;
  padding-bottom: 10rpx;
}

.title {
  text-align: left;
  font-size: $u-content-size;
  //color: $u-content-color;
  margin-top: 20rpx;
  color: #08374A;
}

.amount {
  text-align: left;
  font-size: $u-content-size;
  color: #08374A;
  font-weight: 500;
  margin-top: 20rpx;
}

.remark {
  text-align: left;
  font-size: $u-mini-content-size;
  color: $u-content-color;
  margin-top: 20rpx;
}

/*content*/
.content {
  padding: 0;
}

.in_content {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* #ifdef H5 */
  height: calc(100vh - var(--window-bottom) - var(--window-top));
  /* #endif */
  /* #ifndef H5 */
  height: 100vh;
  /* #endif */
  transition: opacity 0.3s;
  background: rgba(153, 153, 153, 0.62);
  opacity: 0;

  &.active {
    opacity: 1;
    z-index: 1;
  }

  .logo {
    position: relative;
    margin-top: -400upx;
    width: 200upx;
    height: 200upx;
    // z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;

    &.active {
      opacity: 1;
    }
  }
}

.tabbar-box-wrap {
  position: absolute;
  width: 100%;
  padding: 50upx;
  box-sizing: border-box;
  bottom: 0;
  left: 0;

  .tabbar-box {
    position: relative;
    display: flex;
    width: 100%;
    background: #fff;
    border-radius: 20upx;
    padding: 15upx 20upx;
    box-sizing: border-box;
    z-index: 2;
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

    &:after {
      content: '';
      position: absolute;
      bottom: -16upx;
      left: 0;
      right: 0;
      margin: auto;
      width: 50upx;
      height: 50upx;
      transform: rotate(45deg);
      background: #fff;
      z-index: 1;
      box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 20upx;
      z-index: 2;
    }

    .tabbar-box-item {
      // position: relative;
      width: 100%;
      z-index: 3;
      margin: 10upx;
      color: $uni-color-subtitle;
      text-align: center;
      font-size: $uni-font-size-base;

      .box-image {
        width: 100%;
        height: $uni-img-size-lg;
      }
    }
  }
}
</style>

